<template>
  <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0px"
           class="demo-ruleForm login-container">
    <h3 class="title">系统登录</h3>

    <el-form-item prop="identity">
      <el-select class="filter-item" v-model="loginForm.identity" >
        <el-option v-for="item in IdentityOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>                           
      </el-select> 
    </el-form-item>

    <el-form-item prop="username">
      <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit" :loading="logining">登录
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import constantRouterMap from '@/router';
export default {
  data () {
    return {
      logining: false,
      loginForm: {
        username: 'yezhu',
        password: '123456',
        identity:'8'
      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      checked: true,
      redirect: undefined,
      IdentityOptions: [{ value: '8', label: '业主' }, { value: 3, label: '事业合伙人' }],
    }
  },
  watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
  methods: {
    combination(routerTable) {
      if (routerTable) {
        routerTable.forEach((item, index) => {
          item.meta = {
            icon: item.icon,
            title: item.title,
            userAuth: item.userAuth,
          }
          item.component = constantRouterMap[item.component]
          delete item.icon
          delete item.title
          delete item.userAuth
        })
      }
    },
    /**
     * 递归组合成路由树
     * @param {Array} notesArray 路由表
     * @param {Number} chileId 父节点ID
     */
    routerTree(notesArray, chileId) {
      let treeNotes = [];
      if (notesArray && notesArray.length > 0) {
        notesArray.forEach(note => {
          let parentId = note.parentId
          if (chileId == parentId) {
            let cchileId = note.id
            let children = routerUtil.routerTree(notesArray, cchileId)
            if (children && children.length > 0) {
              note["children"] = children
            }
            treeNotes.push(note);
          }
        })
      }
      return treeNotes;
    },
    handleReset () {
      this.$refs.loginForm.resetFields()
    },
    handleSubmit (ev) {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.logining = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
            //this.$router.push({ path: this.redirect || '/mydesktop' })
            this.$router.push({ path: '/index' })

            /* this.$store.dispatch('GenerateRoutes', 'admin,').then(() => { // 生成可访问的路由表
              this.$router.options.routes=this.$store.getters.routers;
              this.$router.addRoutes(this.$store.getters.routers);  // 动态添加可访问路由表
              //next({ ...to }); // 放行路由
              console.log('this.$router',this.$router.options.routes);

              var item = 'permission_routers';
              var data = JSON.stringify(this.$store.getters.routers);
              window.localStorage.setItem(item, data);
              console.log('localstr',data);
              var getdata = window.localStorage.getItem(item);
              let routerTable = JSON.parse(getdata);
          		this.combination(routerTable);//组合成完整路由对象
          		routerTable = this.routerTree(routerTable, 0);//递归组合成嵌套路由树
              console.log('getstr',routerTable);

            }) */

            this.logining = false;

          }).catch(() => {
            this.logining = false
          });
        } else {
          console.log('登录失败!')
          return false
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
  .login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;

    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }

    .remember {
      margin: 0px 0px 35px 0px;
    }
  }
</style>
